<template>
  <div>
    <div class="header">
      <div class="header_tit">可提现Q豆</div>
      <div class="drawMoney">
        <span>￥</span>
        {{userInfo.userCanWithdraw}}
      </div>
      <div class="noDraw">
        <div>不可提现金额</div>
        <img @click="log" src="../assets/ic_hint.png" alt />
      </div>
      <div class="drawMoney aa">
        <span>￥</span>
        {{userInfo.userNotWithdraw}}
      </div>
    </div>
    <div class="drawType_warp">
      <div class="drawType_tit">提现Q豆:</div>
      <input type="number" placeholder="请输入提现Q豆" v-model="inpVal" />
    </div>
    <div class="drawType_warp">
      <div class="drawType_tit">到账金额:</div>
      <div>{{inpVal|ten}}</div>
    </div>
    <div class="drawType_warp">
      <div class="drawType_tit">微信号:</div>
      <input  placeholder="请输入提现微信号" v-model="wxCode" />
    </div>
    <!-- <div class="drawType_warp">
          <div class="drawType_tit">账户类型:</div>
          <div>微信</div>
      </div>
      <div class="drawType_warp">
          <div class="drawType_tit">提现账户:</div>
          <input type="number" placeholder="请输入提现账户">
    </div>-->
    <div class="subBtn" @click="subBtn()">确认提现</div>
  </div>
</template>
<script>
import * as API from "@/http/common/api";
export default {
  name: "topUp",
  data() {
    return {
      userInfo: {},
      inpVal: null,
      wxCode:null,
    };
  },
  methods: {
    subBtn() {
      if (!this.inpVal) {
        this.$vux.toast.show({
          text: "提现金额不能为空",
          type: "text"
        });
        return
      }
      if (!this.wxCode) {
        this.$vux.toast.show({
          text: "请输入提现微信号",
          type: "text"
        });
        return
      }
      if (this.inpVal<100) {
        this.$vux.toast.show({
          text: "提现金额最少100Q豆",
          type: "text"
        });
        return
      }
      if (Number(this.inpVal) > Number(this.userInfo.userCanWithdraw)) {
        this.$vux.toast.show({
          text: "最多可提现" + this.userInfo.userCanWithdraw,
          type: "text"
        });
        return;
      }
      this.$http(API.withdrawDeposit, {
        type: "POST",
        params: {
          rmbAmount: this.inpVal ,
          userId: this.userInfo.userId,
          withdrawName:this.wxCode,
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.userInfo.userCanWithdraw = this.userInfo.userCanWithdraw - this.inpVal
            this.$vux.toast.show({ text: "提交成功,预计一个工作日到账", type: "text" });
            this.inpVal = ''
          } else {
          }
        })
    },
    //提示
    log() {
      this.$vux.toast.show({ text: "推广获得的Q豆不可提现", type: "text" });
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    console.log(this.userInfo);
  },
  filters: {
    ten(val) {
      return val / 10;
    }
  },
  watch:{
    inpVal(newVal,oldVal){
      this.inpVal =Math.floor(newVal) 
    }
  },
  components: {}
};
</script>
<style scoped>
.header {
  width: 345px;
  height: 167px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-top: 10px;
  background: #fff;
  border-radius: 4px;
  padding: 13px 14.5px 0 18.5px;
}
.noDraw {
  display: flex;
  justify-content: space-between;
  margin-top: 17px;
  font-size: 14px;
}
.noDraw > img {
  width: 13px;
  height: 13px;
}
.header_tit {
  color: #666;
  font-size: 14px;
}
.drawMoney {
  font-size: 22px;
  padding-bottom: 15.5px;
  border-bottom: 1px solid #e7e7e7;
  box-sizing: border-box;
  color: #333;
}
.drawMoney > span {
  font-size: 16px;
}
.aa {
  padding: 0;
  border: none;
}
.drawType_warp {
  display: flex;
  height: 44px;
  background: #fff;
  padding: 0 15px;
  box-sizing: border-box;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
}
.drawType_tit {
  margin-right: 4px;
}
.drawType_warp>input{
  width: 200px;
  height: 40px;;
}
.subBtn {
  width: 345px;
  background: #e83263;
  color: #fff;
  text-align: center;
  border-radius: 17px;
  height: 44px;
  line-height: 44px;
  margin: 0 auto;
  margin-top: 44px;
  font-size: 14px;
}
</style>
